<style lang="scss">
	.AppBarBox {
		// position: absolute;
		position: fixed;
		height: 110rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		top: 88%;
	}

	.AppBar {
		background-color: #E8FC72;
		opacity: 0.9;
		width: 65%;
		height: 100%;
		border-radius: 40rpx;
		backdrop-filter: blur(5px);
		display: flex;
		justify-content: space-around;
		align-items: center;
		box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
	}

	.AppBar_yuan {
		background-color: white;
		height: 80rpx;
		width: 80rpx;
		background-color: white;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.AppBar_icon {
		height: 50rpx;
		width: 50rpx;
		fill: red;
	}

	.test {
		background-color: white
	}
</style>
<template>
	<view>
		<view class="AppBarBox">
			<view class="AppBar" :style="'background-color:'+color">
				<view class="AppBar_yuan" @click="chooseIcon(key)" v-for="(i,key) in icon"
					v-if="(key !== 3)||(page === 0)">
					<image :src="i.img1" class="AppBar_icon" @click="chooseIcon(key)" v-if="!i.show" />
					<image :src="i.img2" class="AppBar_icon" v-if="i.show" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import icon from '../../../uni_modules/uview-ui/libs/config/props/icon.js';
	export default {
		props: {
			color: String,
			page: Number
		},
		data() {
			return {
				addIconflage: false,
				addIcon: '',
				number: 0,
				icon: [{
						img1: '../../../static/icon/CheckIn1.svg',
						img2: '../../../static/icon/CheckIn2.svg',
						show: false,
						show2: false,
					},
					{
						img1: '../../../static/icon/CheckIn3.svg',
						img2: '../../../static/icon/CheckIn4.svg',
						show: false,
						show2: false,
					},
					{
						img1: '../../../static/icon/CheckIn5.svg',
						img2: '../../../static/icon/CheckIn6.svg',
						show: false,
						show2: false,
					},
					{
						img1: '../../../static/icon/add.svg',
						img2: '../../../static/icon/add.svg',
						show: false,
						show2: true,
					}
				]
			};
		},
		methods: {
			changeIcon() {

			},
			chooseIcon(number) {
				uni.vibrateShort();
				const pageChoose = ['/pages/index/index', '/pages/tomato/tomato', '/pages/plan/plan'];
				uni.redirectTo({
					url: pageChoose[number]
				});
			},
			indexStyle() {

			},
		},
		created() {
			this.addIcon = false
			this.icon[this.page].show = true;
			this.indexStyle();
		}
	}
</script>